<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <div id="app">
        <!-- {{message}} -->
        <ul>
            <!-- Vue循环 -->
            <li v-for="a in message">
                {{a.meg}} {{a.me}}
            </li>

        </ul>
        <label style="color: aqua;">{{student}}</label>

    </div>

    <div id="app1">
        <label v-bind:title="message1" style="color: crimson;">
            鼠标悬停查看时间信息
        </label>
        </br>
        <!-- Vue判断 -->
        <label v-if="CanSee">我看到你了

        </label>
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: [
                    { meg: "one" },
                    { meg: "two" },
                    { meg: "three" },
                    { meg: "four" },
                    { me: "zero" }
                ],
                student: "giao"


            }
        })
    </script>

    <script>
        var app1 = new Vue({
            el: "#app1",
            data:
            {
                message1: '页面加载时间于' + new Date().toLocaleString(),
                CanSee: true
            }
        })
    </script>

</body>

</html>